<template>
  <div id="app">
    <div id="app-container">
      <div class="common-layout">
        <el-container style="height: 100vh">
          <el-header style="height: 10vh">
            <nav-bar-top></nav-bar-top>
          </el-header>
          <el-container style="height: 90vh">
            <el-aside
              style="width: 130px; margin-left: 20px"
              v-if="show_navbar_left"
            >
              <nav-bar-left></nav-bar-left>
            </el-aside>
            <el-container style="width: 80%">
              <el-main style="width: 100%; padding-top: 0">
                <router-view style="width: 100%"></router-view>
              </el-main>
            </el-container>
          </el-container>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed } from "vue";
import NavBarTop from "./components/NavBarTop.vue";
import NavBarLeft from "./components/NavBarLeft.vue";
import router from "@/router";
import { ElNotification } from "element-plus";
// import { onMounted, onUnmounted } from "vue";

const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
};

const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 16);
    super(callback);
  }
};

export default {
  name: "app",
  components: {
    NavBarTop,
    NavBarLeft,
  },
  setup() {
    let store = useStore();

    const jwt_token = localStorage.getItem("jwt_token");
    if (jwt_token) {
      store.commit("setJwtToken", jwt_token);
      store.state.jwt_token = jwt_token;
      store.dispatch("get_current_user_info", {
        success() {
          // 弹出提示框
          ElNotification({
            title: "获取用户信息成功",
            type: "success",
          });
          // 进一步
          // 通过用户身份获取用户的具体信息
          let id_kind = store.state.user.id_kind;
          if (id_kind == 0) {
            store.dispatch("get_client_info", {
              uid: store.state.user.id,
              token: store.state.user.jwt_token,
            });
          } else if (id_kind == 1) {
            store.dispatch("get_server_info", {
              uid: store.state.user.id,
              token: store.state.user.jwt_token,
            });
          } else if (id_kind == 2) {
            store.dispatch("get_chef_info", {
              uid: store.state.user.id,
              token: store.state.user.jwt_token,
            });
          } else if (id_kind == 3) {
            store.dispatch("get_manager_info", {
              uid: store.state.user.id,
              token: store.state.user.jwt_token,
            });
          }
          router.push({ name: "home" });
        },
        error() {
          // console.log(resp);
          ElNotification({
            title: "获取用户信息失败",
            type: "warning",
          });
        },
      });
    }

    let show_navbar_left = computed(() => {
      let flag = store.state.user.is_login;
      return flag;
    });

    return {
      // webSocketTest,
      store,
      show_navbar_left,
    };
  },
};
</script>

<style scoped>
html,
body {
  margin: 0;
  padding: 0;
}

#app {
  background-image: url("@/assets/login1.jpg");
  background-size: cover;
  background-position: center center;
  overflow: auto;
  background-repeat: no-repeat;
  position: fixed;
  line-height: 100%;
}
</style>
